<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions">

<h:body>
	<ui:composition template="index_decanoSchedule.xhtml">
		<ui:define name="content">
			<p:toolbar id="titulo" style="color:#FFFFFF;font-size:125%;font-weight: bold">
			<p:toolbarGroup align="left">
				<p:outputLabel value="SISTEMA DE DISPONIBILIDAD HORARIA : #{magnaScheduleController.nombrePeriodoActual}"/>
			</p:toolbarGroup>
		    
			</p:toolbar>
			<br/>
			
			<h:form id="form">
				<p:tabView style="margin-left:0.5%;margin-right:1%;margin-top:3%"
				dynamic="true" cache="false" scrollable="true">
					<p:ajax event="tabChange"
						listener="#{magnaScheduleController.onTabChange}" />
					<p:tab title="AULA MAGNA">
						<p:schedule id="Magna"
							value="#{magnaScheduleController.eventModelMagna}" locale="es"
							widgetVar="mag" view="agendaWeek" draggable="false"
							resizable="false" allDaySlot="false" slotMinutes="60"
							firstHour="8" minTime="8" maxTime="22" leftHeaderTemplate="today"
							rightHeaderTemplate="prev,next" centerTemplate="title"
							columnFormat="ddd dd/MM" timeFormat="HH:mm { - HH:mm }"
							axisFormat="HH:mm - HH:59">
							<p:ajax event="eventSelect"
								listener="#{magnaScheduleController.onEventSelect}"
								update=":#{p:component('detailsPanel')}"
								oncomplete="PF('eventDialog').show();" />

						</p:schedule>
						<p:toolbar>
							<p:toolbarGroup align="left">
								<ul style="list-style:none;">
									<li>
										<p:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="background-color:green;"/>
										<p:outputLabel value="&nbsp;Peticiones aceptadas&nbsp;" />
									</li>
									<li>
										<p:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="background-color:blue;"/>
										<p:outputLabel value="&nbsp;Cursos Asignados&nbsp;" />
									</li>
									<li>
										<p:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="background-color:gray;"/>
										<p:outputLabel value="&nbsp;Peticiones en espera&nbsp;" />
									</li>
								</ul>
							</p:toolbarGroup>
							<p:toolbarGroup align="right">
								<p:commandButton value=" GENERAR EVENTO EN AULA MAGNA "
									oncomplete="PF('eventDialog1').show();" />
							</p:toolbarGroup>
						</p:toolbar>
					</p:tab>

				</p:tabView>
				<p:growl id="messages" showDetail="true" life="5000"/>
				<p:outputPanel id="detailsPanel">
					<p:dialog id="dialogo" widgetVar="eventDialog" header="Detalles"
						showEffect="clip" hideEffect="clip">
						<p:panelGrid id="claseDetails" columns="2"
							rendered="#{magnaScheduleController.detalleClase eq true}">
							<h:outputText value="NOMBRE DE DOCENTE :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.nombreDocente}" />
							<h:outputText value="CURSO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.curso}" />
							<h:outputText value="GRUPO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.grupo}" />
							<h:outputText value="ESCUELA :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.escuela}" />
							<h:outputText value="HORA DE INICIO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.hInicio}" />
							<h:outputText value="HORA DE FIN :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.hFin}" />
						</p:panelGrid>
						<p:panelGrid id="eventoDetails" columns="2"
							rendered="#{magnaScheduleController.detalleEvento eq true}">
							<h:outputText value="NOMBRE DE ENCARGADO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.nombreUsuario}" />
							<h:outputText value="NOMBRE DE EVENTO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.nombreEvento}" />
							<h:outputText value="HORA DE INICIO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.hInicio}">
								<f:convertDateTime type="date" timeZone="America/Lima"
									pattern="HH:mm:ss" />
							</h:outputText>
							<h:outputText value="HORA DE FIN :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.hFin}">
								<f:convertDateTime type="date" timeZone="America/Lima"
									pattern="HH:mm:ss" />
							</h:outputText>
						</p:panelGrid>
					</p:dialog>
					<p:dialog widgetVar="eventDialog1"
						header="GENERAR EVENTO EN AULA MAGNA" showEffect="clip"
						hideEffect="clip">
						<p:panelGrid styleClass="panelNoBorder">
							<p:row>
								<p:column>
									<h:outputLabel value="USUARIO DE AMBIENTE  :" />
								</p:column>
								<p:column>
									<h:outputLabel value="#{magnaScheduleController.nombreUsuario}" />
								</p:column>
								<p:column>
									<p:selectBooleanCheckbox
										value="#{magnaScheduleController.soyUsuario}">
										<p:ajax update="input"
											listener="#{magnaScheduleController.activarInput}" />
									</p:selectBooleanCheckbox>
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<h:outputLabel value=" " />
								</p:column>
								<p:column>
									<h:outputLabel value=" OTRA PERSONA " />
								</p:column>
								<p:column>
									<p:inputText id="input"
										value="#{magnaScheduleController.peticionDoc.nombreUsuario}"
										disabled="#{magnaScheduleController.esUsuario eq 1}"/>
								</p:column>
							</p:row>
						</p:panelGrid>
						<h:panelGrid id="eventDetails1" columns="2"
							style="text-align:center;margin-left:auto;margin-right:auto">

							<h:outputLabel for="nombreE" value="NOMBRE EVENTO :" />
							<p:inputText id="nombreE"
								value="#{magnaScheduleController.peticionDoc.nombreEvento}" />

							<h:outputLabel for="aulaL" value="AULA  :" />
							<h:outputLabel id="aulaL" value="AULA  MAGNA" />

							<h:outputLabel for="idCalendar" value="FECHA" />
	                             <p:calendar id="idCalendar" required="true"
	                                     requiredMessage="Ingrese la Fecha de Inicio" size="15"
	                                     mindate="#{magnaScheduleController.inicioCalendar}"
	                                     value="#{magnaScheduleController.peticionDoc.dia}"
	                                     readonlyInput="true"
	                                     onchange="#{magnaScheduleController.esDiaDeHoy()}">
	                                     <p:ajax event="dateSelect" update="idCalendar hI HF" />
	                             </p:calendar>
	
	                             <h:outputLabel for="hI" value="HORA DE INICIO :" />
	                             <p:calendar id="hI"
	                                     value="#{magnaScheduleController.peticionDoc.hInicio}"
	                                     required="true" requiredMessage="Ingrese La Hora de Inicio"
	                                     pattern="HH:mm"
	                                     minHour="#{magnaScheduleController.mismoDia ? magnaScheduleController.horaMinimaInicio.getHours() : 8}"
	                                     maxHour="#{magnaScheduleController.horaMaximaInicio.getHours()}"
	                                     maxMinute="0"
	                                     minMinute="0"
	                                     timeOnly="true" readonlyInput="true">
	                                     <p:ajax event="dateSelect" update="idCalendar HF" />
	                             </p:calendar>
	
	                             <h:outputLabel for="HF" value="HORA DE FIN :" />
	                             <p:calendar id="HF"
	                                     value="#{magnaScheduleController.peticionDoc.hFin}"
	                                     required="true" requiredMessage="Ingrese la Hora de Fin"
	                                     pattern="HH:mm"
	                                     minHour="#{magnaScheduleController.horaMinimaFin.getHours()}"
	                                     maxHour="22"
	                                     minMinute="0"
	                                     maxMinute="0"
	                                     timeOnly="true" readonlyInput="true">
	                                     <p:ajax event="dateSelect" update="idCalendar hI" />
	                             </p:calendar>

							<h:outputLabel for="NR" value="NUMERO DE SEMANAS :" />
							<p:spinner id="NR" required="true"
								requiredMessage="Ingrese la Duración en Semanas del Evento"
								value="#{magnaScheduleController.peticionDoc.numRep}" min="1" />
							<h:outputLabel for="MT" value="MOTIVO" />
							<h:inputTextarea id="MT"
								value="#{magnaScheduleController.peticionDoc.motivo}" />
							<h:outputLabel value="ALQUILER? " />
							<p:selectBooleanCheckbox
								value="#{magnaScheduleController.esAlquiler}">
								<p:ajax listener="#{magnaScheduleController.validarAlquiler}" />
							</p:selectBooleanCheckbox>
							
							<p:commandButton id="addButton1" value="Guardar Evento" update="pnlValidarCampos"
								actionListener="#{magnaScheduleController.crearEventoDirecto}" />
							<p:commandButton id="cancelButton1" value="Cancelar Evento"
								action="#{magnaScheduleController.botonCancelarDialog}"
								update=":form" >
								<p:confirm header="Cancelar" message="¿Está seguro que desea cancelar la acción? (Se perderá la información ingresada)" 
									icon="ui-icon-alert"/>
							</p:commandButton>
							<p:confirmDialog global="true" showEffect="fade">
								<p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
        						<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>
							
						</h:panelGrid>
					</p:dialog>
					
					<p:dialog widgetVar="cruceDialog" modal="false" draggable="false"
						closable="true" resizable="false" showHeader="true" header="CRUCE DE EVENTOS">
					
						<h:panelGrid id="pnlCD" global="true"
							style="text-align:center;margin-left:auto;margin-right:auto"
							columns="1">
							<h:outputText value="EL EVENTO QUE DESEA CREAR GENERA CONFLICTOS CON CLASES O EVENTOS YA APROBADOS , NO SE PUEDE AGREGAR ESE EVENTO"
							style="font-weight:bold;color:red" />
						</h:panelGrid>
						
					</p:dialog>
					
					<p:dialog widgetVar="crucePetDialog" modal="false" draggable="false"
						closable="true" resizable="false" showHeader="true" header="CRUCE DE EVENTOS">
					
						<h:panelGrid id="pnlCPD"
							style="text-align:center;margin-left:auto;margin-right:auto"
							columns="1">
							<h:outputText value="EXISTEN PETICIONES QUE ENTRAN EN CONFLICTO CON ESTA ACCION , POR FAVOR REVISE LAS PETICIONES ANTES DE CONTINUAR"
							style="font-weight:bold;color:red" />
						</h:panelGrid>
					</p:dialog>
					<p:dialog widgetVar="validDialog" modal="false" draggable="false"
						closable="true" resizable="false" showHeader="true" header="Error" 
						width="500" height="300">
						
							<h:panelGrid id="pnlValidarCampos"
								style="text-align:center;margin-left:auto;margin-right:auto"
								columns="1">
								<h:outputText value="Hay datos ingresados no válidos:" />
								
								<h:outputText value="OTRA PERSONA: El nombre de la persona no esta especificado." rendered="#{magnaScheduleController.campoVacioOtraPersona}"/>
								<h:outputText value="OTRA PERSONA: El nombre de la persona no debe contener números." rendered="#{magnaScheduleController.campoVacioOtraPersona eq false and magnaScheduleController.noHayNumerosOtraPersona eq false ? true : false}"/>
	                            <h:outputText value="NOMBRE EVENTO: El nombre del evento no esta espeficicado." rendered="#{magnaScheduleController.campoVacioNombreEvento}"/>
	                            <h:outputText value="FECHA: El dia del evento no esta especificado." rendered="#{magnaScheduleController.campoVacioFecha}"/>
	                            <h:outputText value="HORA DE INICIO: La hora de inicio del evento no esta especificada." rendered="#{magnaScheduleController.campoVacioHoraInicio}"/>
	                            <h:outputText value="HORA DE FIN: La hora de final del evento no esta especificada." rendered="#{magnaScheduleController.campoVacioHoraFin}"/>
	                            <h:outputText value="NUMERO DE SEMANAS: El numero de semanas del evento no esta adecuadamente especificado, debe ser mayor o igual a 1." rendered="#{magnaScheduleController.campoVacioNumSemanas}"/>
	                            <h:outputText value="MOTIVO: El motivo del evento no esta especificado." rendered="#{magnaScheduleController.campoVacioMotivo}"/>
		
							</h:panelGrid>
						
					</p:dialog>
					
				</p:outputPanel>
			</h:form>
			<script type="text/javascript">
		    PrimeFaces.locales['es'] = {
		        closeText: 'Cerrar',
		        prevText: 'Anterior',
		        nextText: 'Siguiente',
		        currentText: 'Esta Semana',
		        monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
		        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
		        dayNames: ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sábado',],
		        dayNamesShort: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
		        dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
		        weekHeader: 'Semana',
		        firstDay: 1,
		        isRTL: false,
		        showMonthAfterYear: false,
		        yearSuffix: '',
		        month: 'Mes',
		        week: 'Semana',
		        day: 'Dia',
		        allDayText : 'Todo el Dia'
		    };
		</script>
			<style type="text/css">
.value {
	width: 1000px;
}

.clase .fc-event-inner {
	background: blue;
}

.evento .fc-event-inner {
	background: green;
}

.pendiente .fc-event-inner {
	background: gray;
}

.ceups .fc-event-inner {
	background: red;
}

.upg .fc-event-inner {
	background: yellow;
}

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td {
	border: hidden;
	border-color: white;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
</style>
		</ui:define>
	</ui:composition>
</h:body>
</html>
